// 自适应表格高度
import { DirectiveBinding } from 'vue'

interface ExHTMLElement extends HTMLElement {
  resizeListener: EventListener
}

export default {
  mounted: (el: ExHTMLElement, binding: DirectiveBinding) => {
    el.resizeListener = () => {
      setTableHeight(el, binding)
    }

    setTableHeight(el, binding)

    window.addEventListener('resize', el.resizeListener)
  },
  unmounted(el: ExHTMLElement) {
    window.removeEventListener('resize', el.resizeListener)
  },
  updated(el: ExHTMLElement, binding: DirectiveBinding) {
    setTableHeight(el, binding)
  }
}

// 设置表格窗口高度
function setTableHeight(el: ExHTMLElement, binding: DirectiveBinding) {
  // el-table距离窗口顶部偏移量
  const top = el.offsetTop;
  // 底部预留的高度 bottom[自己进行调整]
  const bottom = binding?.value?.bottom || 70;
  // console.log(bottom)
  const pageHeight = window.innerHeight;
  el.style.height = pageHeight - top - bottom + 'px';
  el.style.overflowY = 'auto';
}
